NIEHS — Work

Highlights of the work I have done at NIEHS.

Overview

Summary

NIEHS is constantly going through changes with content and design. I joined as a Content Stratagist and moved into a UI/UX position. In the following projects you will see updating web pages to make them more friendly and applying USWDS along with an updated modern design.

Role

UI/UX Designer

  • User Experience Design
  • User Interface Design
  • Visual Design
  • Prototyping
  • Testing

Product Design

Top Level Pages - Design Options

The goal of re-designing the top level pages were to follow the USWDS as a requirement of U.S. Government run website.

Option 1 - This option consists of a clean and visual design. It has more emphasis on the child pages and is specific to the top level page. This option has special containers for specific sections such as Hot Topics.

Option 2 - In this concept, the emphasis is placed on the child pages two levels down. The layout allows the user to get to pages faster as well as help the user understand the hierarchy while keeping the page itself short. This option condenses special containers into call out boxes that reside in a column right of the main content.

Health & Education - Option 1

Health & Education - Option 2

Research - Option 1

Research - Option 2

Funding Opportunities - Option 1

Funding Opportunities - Option 2

Careers & Training - Option 1

Careers & Training - Option 2

News & Events - Option 1

News & Events - Option 2

About NIEHS - Option 1

About NIEHS - Option 2

CHORDS Software Page Redesign

This redesign was about a re-organization of the information provided by a department in NIEHS, Climate and Health Outcomes Research DataSystems (CHORDS). The scientists are using GitHub to house their software and wanted a page to describe them in a convenient location.

There are 3 options to meet the criteria of the client along with a few suggestions that we felt would help the scientist based on their use and needs. This includes mobile versions of the web design.

CHORDS Software - Option 1

CHORDS Software - Option 2

CHORDS Software - Option 3

CHORDS Software - Mobile Options 1 - 3

Testing

Usability Studies

Comparative Medicine Branch - SOPs

The Comparative Medicine Branch (CMB) had a special application to search the Standard Operating Procedures (SOP) that was widely used by departments within NIEHS and their scientists. We tested the search features by observing scientists and administrators use the search, and in some instances not using the search application in order to find the SOP they needed.

Findings - We found that majority users would use the website's search engine, bookmarks, or skip the applications search feature to manually search through the list provided by the application. This was often because they already knew what they were looking for or the complete opposite.

Pain Points - A big point for all users was not knowing when an SOP has been updated. Even though we had dates on the SOP of when it has been updated, users wanted the information to be more apparent.

Another pain point we found was that some of the labels made sense to neither scientists nor administrative roles.

Solutions - The CMB SOP application was updated to include a marker of recently updated SOPs. We also updated the SOP pages to make the last date it was updated more apparent. Lastly, we implemented a mailing system to be emailed when the SOP was updated.

For the filters, we had updated the list to match more concisely with the use of both scientists and administrators. The new list consisted of suggestions made by both parties and proved to be more accurate.

Top Tasks List

The Top Task list is a list on a private government webpage that takes users to commonly used tasks. Both scientists and administrative role users under NIEHS would use the top task list.

Findings - Users, old and new alike found a list of links to Top Tasks to be frustrating and disorganized.

Pain Points - For old users the issue was the name of the list items made no sense. For example, the link was a suggested action rather than where the link took you. Such as getting help with IT rather than IT Help Desk. This was also an issue because it was not consistent with the rest of the list.

For new users, some of the list items were abbreviated and they did not know the abbreviation. Even if they did know the list was in alpha order, and combined with actions rather than where the link would lead you to make it confusing to look through.

Solution - The solution to this problem was simple and elegant. First, all the links were changed to the location or application it led the user to. Second, the abbreviation was first followed by a dash and the abbreviation written out. With the consistency of the first part of the solution combined with the second, both new and old users found the Top Tasks List to be easier to navigate.

Recycle Guide

The Recycle Guide was a requested application to help users properly recycle or dispose of waste.

Findings - The scientist who would use the recycling guide had requested an application to help make it easier to understand what to do with waste. This included the steps needed to take in order to dispose or recycle and where to dispose or recycle.

Pain Points - Scientists were having a tough time knowing how and where to recycle certain types of plastics and glass. They also brought up not knowing how to dispose of items. There were also concerns about different recycling instructions depending on location as well as scientist roles and administrative roles.

Solutions - When creating cards in the application, we had separated items that cannot be recycled with items that can be. To help with the pain points, we included how and where to dispose of items in the card once expanded.

To address the concerns of location and roles, we included filters based on location. This helped tremendously and made it a lot easier for the user to filter through the cards.